<template>
  <view class="pwd">
    <view class="pwd-retrieve-container">
      <uni-forms ref="form" :value="user" labelWidth="80px">
        <uni-forms-item name="oldPassword" label="原密码">
          <uni-easyinput
            :inputBorder="false"
            type="password"
            placeholder="请输入原密码"
            v-model="user.oldPassword"
            :maxlength="10"
          ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="newPassword" label="新密码">
          <uni-easyinput
            :inputBorder="false"
            type="password"
            placeholder="请输入新密码"
            v-model="user.newPassword"
            :maxlength="10"
          ></uni-easyinput>
        </uni-forms-item>
        <uni-forms-item name="confirmPassword" label="确认密码">
          <uni-easyinput
            :inputBorder="false"
            type="password"
            placeholder="请确认密码"
            v-model="user.confirmPassword"
            :maxlength="10"
          ></uni-easyinput>
        </uni-forms-item>
      </uni-forms>
    </view>
    <view class="px-20">
      <view class="text-red">密码必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间</view>
      <button class="u-button block" @click="submit">保存</button>
    </view>
  </view>
</template>

<script>
import { updateUserPwd } from '@/api/login'
import { AESencrypt } from '@/utils/crypto'
import { mapGetters } from 'vuex'
export default {
  data() {
    const validatorPwd = (rule, value, data, callback) => {
      // const regex = /^(?=.*[a-z])(?=.*[A-Z])(?=.*\d)(?=.*[\W_]).{8,}$/
      const regex = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{8,10}$/
      if (regex.test(value)) {
        return true
      } else {
        return callback('必须包含大小写字母和数字的组合，可以使用特殊字符，长度在8-10之间')
      }
    }
    return {
      user: {
        oldPassword: undefined,
        newPassword: undefined,
        confirmPassword: undefined
      },
      rules: {
        oldPassword: {
          rules: [
            {
              required: true,
              errorMessage: '旧密码不能为空'
            }
          ]
        },
        newPassword: {
          rules: [
            {
              required: true,
              errorMessage: '新密码不能为空'
            },
            {
              validateFunction: validatorPwd
            }
          ]
        },
        confirmPassword: {
          rules: [
            {
              required: true,
              errorMessage: '确认密码不能为空'
            },
            {
              validateFunction: (rule, value, data) => data.newPassword === value,
              errorMessage: '两次输入的密码不一致'
            }
          ]
        }
      }
    }
  },
  computed: {
    ...mapGetters(['userInfo'])
  },
  onReady() {
    console.log(this.userInfo)
    this.$refs.form.setRules(this.rules)
  },
  methods: {
    async submit() {
      await this.$refs.form.validate()
      updateUserPwd({
        oldPassword: AESencrypt(this.user.oldPassword, this.userInfo.account),
        newPassword: AESencrypt(this.user.newPassword, this.userInfo.account),
        confirmPassword: AESencrypt(this.user.confirmPassword, this.userInfo.account),
        account: this.userInfo.account
      }).then((response) => {
        this.$modal.msgSuccess('修改成功')
        this.$store.dispatch('LogOut').then(() => {
          this.clearUserInfo()
          this.$tab.reLaunch('/pages/login')
        })
      })
    },
    clearUserInfo() {
      uni.removeStorageSync('password')
    }
  }
}
</script>

<style lang="scss" scoped>
.pwd-retrieve-container {
  margin-top: 20rpx;
  background: #fff;
  padding-left: 30rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  font-weight: 400;
  color: #333333;

  .uni-easyinput {
    text-align: right;
    font-size: 28rpx;
    padding-right: 22rpx;
    box-sizing: border-box;
  }

  ::v-deep .uni-forms-item__content uni-easyinput__content {
    height: 100%;
  }

  ::v-deep .uni-forms-item__error {
    top: 70%;
    left: initial;
    right: 22rpx;
  }

  ::v-deep .uni-easyinput__placeholder-class {
    font-size: 28rpx;
    color: #bbbbbb;
  }

  ::v-deep .uniui-eye-filled {
    color: rgb(192, 196, 204) !important;
  }

  .uni-forms-item {
    border-bottom: 1rpx solid #d5d7e3;
    margin-bottom: 0rpx;
    padding: 14rpx 0;
  }
}

.text-red {
  color: #a14430;
  font-size: 24rpx;
  text-align: center;
  margin-top: 20rpx;
  margin-bottom: 40rpx;
}

::v-deep .input-placeholder {
  color: #bbbbbb;
}
</style>
